define(['jquery', 'text!../../Content/projects/projects.html', 'common', 'knockout', "vendor/jquery.colorbox"], function($, html, common, ko, colorbox){

	var container;

	function init(c){
		container = $(c);
		container.html(html);
		loadTeamNav();
		bindEvents();
	}


	function bindEvents(){

		container.on('click', 'a.spaceLink', function(e){
			e.preventDefault();

			var projectDetailsDiv ="<div class='projectOverview'>\
									<h2>Project  Overview</h2>\
									<ul class='clearfix'>\
									<li>Last update date: (Date)</li>\
									<li>Description: (free text)</li>\
									<li>Scope:(free text)</li>\
									<li>Deliverables:(free text)</li>\
									<li>Expected completion date:(Date)</li>\
									<li>Budget status: (free text)</li>\
									<li>Overall status:(free text)</li>\
									<li>Next steps:(free text)</li>\
									<li>Related material:(Links)</li>\
									</ul>\
									</div>";

			$.colorbox({html:projectDetailsDiv, width:"50%", height:"50%", opacity:"0.7", transition:"none"});
		});
	}

	var viewModel = {
		Projects : ko.observable()
	};

	function loadTeamNav(){
		common.service('projects.json').success(function(data){
			viewModel.Projects = data;
			ko.applyBindings(viewModel, container[0]);
		});
	}
	return {
		"init" : init
	};

});